<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Brand</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/icons.css">
    <script src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.bxslider.js"></script>
    <link href="css/jquery.bxslider.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
        $(document).ready(function(){

            $('.slider7').bxSlider({

                slideWidth: 400,

                infiniteLoop: false,

                hideControlOnEnd: true,

                slideMargin: 10,
                pager: false

            });

        });
    </script>

    <!--region 导航栏消失-->
    <script>
        $(document).scroll(function () {
            if($(document).scrollTop()===0) {
                $("#header").removeClass("headroom--not-top headroom--unpinned");
                $("#header").addClass("headroom--pinned headroom--top");
            } else {
                $("#header").removeClass("headroom--pinned headroom--top");
                $("#header").addClass("headroom--not-top headroom--unpinned");
            }
            // console.log($(document).scrollTop());
        })
    </script>
    <!--endregion-->

    <style>
        #design p,h2{
            color: #f4f4f4 ;
        }
    </style>
</head>
<body>
<header id="header" class="headroom headroom--not-bottom headroom--pinned headroom--top" onscroll="myFunction()">
    <div id="header--bg" onscroll="myFunction()">
        <div class="d-flex align-items-center justify-content-end">

            <div id="gnav">
                <nav>
                    <ul>
                        <li><a href="./brand.html"><span>Brand</span></a></li>
                        <li><a href="./portfolio.html"><span>Portfolio</span></a></li>
                        <li><a href="./hometown.html"><span>Hometown</span></a></li>
                        <li><a href="./about.html"><span>About</span></a></li>
                        <li><a href="./contact.html"><span>Contact</span></a></li>
                        <li><a href="./index.html#artist"><img src="./images/logo.svg"  width="20%" style="position: relative;top: -10px;left: 20px"/></a></li>
                    </ul>
                </nav>
            </div>

        </div>
    </div>
</header>
<main id="index" style="margin-bottom: 100px">
    <div id="main--image" class="main--brand active">
        <div class="container">
            <h2 id="main--text">Brand</h2>
        </div>
    </div>
</main>

<div class="slider7">

    <div class="slide"><img src="images/brand/21.png" ></div>

    <div class="slide"><img src="images/brand/22.png" ></div>

</div>

<div id="design" class="row flex-column align-items-center" style="background-color: #1d2124;padding-top: 60px;padding-bottom: 60px;margin-top: 100px;margin-bottom: 100px">
   <h2 style="margin-bottom: 40px">Design description</h2>
    <div class="row justify-content-center" style="width: 80%;">
        <img class="col-4" src="images/brand/31.png"  style="margin-right: 80px;"/>
        <div class="col-2 row flex-column align-items-start" style="flex: 0 0 10%">
            <p>「WYJ」</p>
            <p>「玫瑰」</p>
            <p>「烟紫色」</p>
        </div>
        <div class="col-5 row flex-column align-items-start">
            <p>外观选取了我名字的首字母WYJ</p>
            <p>将其组合成一朵玫瑰花的形状。</p>
            <p>颜色选取了个人喜欢的烟紫色。</p>
            <p>紫色是一种不确定的色彩，不像蓝色那样冰冷，也不如红色</p>
            <p>那样强烈，它处于冷暖之间游离不定的状态，显得神秘、梦</p>
            <p>幻，给人以无限的遐想。</p>
        </div>
    </div>
</div>

<footer id="footer" style="margin-top: 300px">
    <div class="container pos-r">
        <div class="ft--body">
            <div class="row justify-content-between">
                <div class="col-lg-5 order-lg-2">
                    <div id="foot-contact" class="row flex-column justify-content-around align-items-start" style="position: relative;top: -200px;padding: 50px">
                        <h3 class="mb40 z-index-99">Contact</h3>
                        <p class="mb30 z-index-99">著名奶茶鉴定家。<br>国家精准扶贫项目重点帮扶对象。</p>
                        <p class="z-index-99"><span>TEL:</span>139 6550 1155</p>
                        <p class="z-index-99"><span>EMAIL:</span>806632876@qq.com</p>
                    </div>
                </div>
                <div class="col-lg-7 order-lg-1 row justify-content-around align-items-start">
                    <img class="col-2" src="./images/logo-foot.svg" alt="Invincible Hair MADA">
                    <div class="d-none d-lg-block col-8">
                        <div class="row mb60">
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/concept/">Brand</a></li>
                                    <li><a href="/About/">About</a></li>
                                </ul>
                            </div>
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/recruit/">Portfolio</a></li>
                                    <li><a href="/contact/">Contact</a></li>
                                </ul>
                            </div>
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/news/">Hometown</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
</body>
</html>